$(function(){
    // 1.初始化渲染引擎
    // 1.1 获取搜索页面传递过来的搜索值
    var searchValue = lt.getUrlParams().key;
    searchValue = decodeURIComponent(searchValue) || '';
    // 1.2 将值放在搜索列表页的是搜索框中
    $('.search_input').val(searchValue);
    // 定义渲染方法
    var render = function(){
        getProductListData({
            proName:searchValue,
            page:1,
            pageSize:5
        },function(res){
            // console.log(res)
            // 1.3.2 用模板渲染数据
            $('.lt_product').html(template('serchListTpl',res))
        })
    }
    // 1.4 调用初始渲染方法
    render()
    // 2点击搜索渲染
    // 2.1注册点击事件
    $('.search_btn').on('tap',function(){
        var searchValue = $.trim($('.search_input').val())
        // 2.1.1 加载状态提示
        $('.lt_product').html('<div class="loading"><span class="mui-icon mui-icon-spinner"></span></div>>')
        // 2.2.2 请求数据重新渲染
        getProductListData({
            proName:searchValue,
            page:1,
            pageSize:5
        },function(res){
            // console.log(res)
            // 用模板渲染数据
            $('.lt_prouct').html(template('searchListTpl',res))
        })
    })
    $('.lt_order [data-type]').on('tap', function () {
        $(this).siblings().find('span').removeClass('fa-angle-up').addClass('fa-angle-down')
        // 3.1判断当前是否选中状态
        if ($(this).hasClass('now')) {
            var item = $(this).find('span')
            console.log(item)
            if (item.hasClass('fa-angle-down')) {
                item.removeClass('fa-angle-down').addClass('fa-angle-up')
            } else {
                item.removeClass('fa-angle-up').addClass('fa-angle-down')
            }
        }
        // 3.2 实现排他功能
        $(this).addClass('now').siblings().removeClass('now')
        // 3.4 请求数据重新渲染
        // 3.4.1获取排序类型
        var order = {}
        var key = $(this).data('type')
        // 3.4.2获取升序还是降序 1 升序 2 降序 借口提供
        var val = $(this).find('span').hasClass('fa-angle-dow') ? 2 : 1
        order[key] = val
        getProductListData($.extend({
            proName: searchValue,
            page: 1,
            pageSize: 5,
        }, order),function(res) {
            // 1.3.2用模板渲染数据
            $('.lt_product').html(template('searchListTpl',res))
            
        })
    })


// 点击排序功能
   mui.init({
       pullRefresh:{
           container:".mui-scroll-wrapper",
           down:{
            //    可选,默认50.触发下拉刷新拖动距离
               height:50,
            //    可选,默认false 首次加载自动下拉刷新一次
               auto:false,
            //    可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容
               contentdown:"下拉可以刷新",
            //    可选,正在刷新状态时,下拉刷新控件上显示的标题内容
               contentover:"释放立即刷新",
            //   必选 刷新函数,根据具体业务来编写,比如通过ajax从服务器获取数据
               callback:function(){
                //   注意,加载完新数据后,必须执行如下代码,注意,若为ajax请求,则需将如下代码防止在处理完的响应数据之后
                // 没有更多内容了,endPulldown 传入true ,不再执行下拉刷新
                // 补充说明 新版本下拉上啦更新啦
                render()
                setTimeout(function(){
                    this.endPulldownToRefresh()
                }.bind(this),1000)
               }
           }
       },
       up:{
           callback:function(){
            //    上拉效果隐藏
            var that = this
            setTimeout(function(){
                // 下拉刷新效果因擦
                that.endPullupToRefresh()
            },1000)
           }
       }
   })
})
function getProductListData(params,cb){
    $.ajax({
        type:"get",
        url:"/product/queryProduct",
        async:true,
        data:params,
        dataType:'json',
        success:function(res){
            setTimeout(function(){
                if(res.data.length ==0){
                    mui.toast('没有相关商品')
                }
                cb&cb(res)
            },1000)
        }
    });
}